<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />

    <title>GPU-based Image Interlacing</title>

    <script type="text/javascript" src="../x3dom-include.js"></script>
</head>
       
<body>
    <h3>GPUII - GPU-based Image Interlacing using X3DOM's RefinementTexture</h3>
	<div>
        <!------------------------------------------ X3DOM ------------------------------------------------->
		<X3D showStat="false" showLog="false" style="width: 100%; margin-left: 4px; height: 82%;">
          <Scene>
             <transform id="root" scale="1.9 0.75 1" translation="-3 0 0">
                 <Shape>
                    <Appearance>
                        <Material></Material>
                        <RefinementTexture id="refTex" url="gpuii/example_1" dimensions="1088 610 4" 
							autoRefinement="true" maxLevel="7" repeatS="false" repeatT="false" origChannelCount="3">
                        </RefinementTexture>
                    </Appearance>
                    <Plane></Plane>
                 </Shape>
             </transform>
             
             <transform>
                 <Shape>
                    <Appearance>
                        <Material></Material>
                        <RefinementTexture id="refTexPOT" url="gpuii/room_1" dimensions="1024 1024 4" 
							autoRefinement="true" maxLevel="7">
                          <textureProperties boundaryModeS='CLAMP_TO_EDGE' boundaryModeT='CLAMP_TO_EDGE'
                                magnificationFilter='LINEAR' minificationFilter='LINEAR_MIPMAP_LINEAR'
                                generateMipMaps='true'>
                          </textureProperties>
                        </RefinementTexture>
                    </Appearance>
                    <Plane></Plane>
                 </Shape>
             </transform>
             
             <transform id="rootN" scale="1.9 0.75 1" translation="3 0 0">
                 <Shape>
                    <Appearance>
                        <Material></Material>
                        <RefinementTexture id="refTexN" url="gpuii/example_2" dimensions="1216 404 4" 
							autoRefinement="true" maxLevel="7" repeatS="false" repeatT="false">
                        </RefinementTexture>
                    </Appearance>
                    <Plane></Plane>
                 </Shape>
             </transform>
             <DirectionalLight intensity="0.3" direction="0 0 -1"></DirectionalLight>
             <Viewpoint position="0 0 10" zNear="0.1" zFar="10000" description="camera"></Viewpoint>
          </Scene>
        </X3D>
	</div>
	
	<script type="text/javascript">
	var cnt = 1;
	var N = 350;
	
    function addNode(n) {
		for (var i=0; i<n; i++) {
			var x = Math.random() * 6 - 3;
			var y = Math.random() * 6 - 3;
			var z = Math.random() * 6 - 3;
		
			var s = Math.random() + 0.5;
			
			var t = document.createElement('Transform');
			t.setAttribute("translation", x + " " + y + " " + z);
			t.setAttribute("scale", s + " " + s + " " + s);
			var s = document.createElement('Shape');
			
			var app = document.createElement("Appearance");
			var tex = document.createElement("RefinementTexture");
			
			tex.setAttribute("repeatS", "false");
			tex.setAttribute("repeatT", "false");
			tex.setAttribute("url", "gpuii/example_1");
			tex.setAttribute("autoRefinement", "true");
			tex.setAttribute("dimensions", "1088 610 4");
			tex.setAttribute("maxLevel", "7");
			
			app.appendChild(tex);
			s.appendChild(app);
			
			t.appendChild(s);
			var b = document.createElement('Plane');
			s.appendChild(b);
			
			var ot = document.getElementById('root');
			ot.appendChild(t);
		}
		console.log( cnt+=n );
    }
    
    function removeNode(n) {
        var ot = document.getElementById('root');
        for (var j=0, i=ot.childNodes.length-1; i>=0; i--) {
        	if (ot.childNodes[i].nodeType === Node.ELEMENT_NODE) {
        		ot.removeChild(ot.childNodes[i]);
				cnt--;
				if (++j >= n)
					break;
  			}
  		}
		console.log(cnt);
    }
	</script>
	
	<div class="group">
        <input type="button" value="Add 1 Node" onclick="addNode(1);" />
		<input type="button" value="Add 10 Nodes" onclick="addNode(10);" />
		<input type="button" value="Add many Nodes" onclick="addNode(N);" />
		<input type="button" value="Remove 1 Node" onclick="removeNode(1);" />
		<input type="button" value="Remove many Nodes" onclick="removeNode(N);" />
	</div>
</body>
</html>
